<template>
	<view class="container">
		<!-- 自定义头部 -->
		<HeaderNav ref="headerNavComponent" :title="'登录'" :backIconShow="false"></HeaderNav>

		<scroll-view scroll-y scroll-with-animation class="container-scroll" style="height: 100vh;">
			<view class="container-box">
				<!-- 占位 -->
				<view :style="'width: 100%;height: ' + headerNavHeight + 'px'"></view>
				<!-- 占位 -->

				<!-- 内容 -->
				<view class="box" :style="'width: 100%;height: calc(100vh - ' + headerNavHeight + 'px)'">
					<image class="logo" src="@/static/logo.png" mode=""></image>
					<view style="width: 100%;height: 200rpx;"></view>
					<view @tap="complete" class="login-btn">手机号快捷登录
					</view>
					<view @tap="goBack" class="not-login-btn">暂不登录</view>

					<view v-if="hintShow" class="hint-box-bg">
						<view class="hint-box">
							<text>您未绑定手机号，可进行快速绑定</text>
							<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
								<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="bind-btn">绑定手机号</button>
								<view style="width: 100%;height: 20rpx;"></view>
								<view class="close-show" @tap="closeShow">
									返回
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 内容 -->
			</view>
		</scroll-view>

		<!-- 用户隐私保护提示 -->
		<PrivacyPopup ref="myPrivacyPopup" @closePrivacyPopup="closePrivacyPopup">
		</PrivacyPopup>
	</view>
</template>

<script>
	import {
		requestGet,
		requestPost
	} from "@/service/request";
	import {
		wxLogin,
		bindMobile
	} from "@/service/api/login";
	import {
		setToken,
		setUserInfo,
		getPrivacy,
		setPrivacy
	} from "@/service/localStorage";

	import HeaderNav from "@/components/HeaderNav/index.vue";
	import PrivacyPopup from "@/components/PrivacyPopup/index.vue";

	export default {
		components: {
			HeaderNav,
			PrivacyPopup,
		},
		data() {
			return {
				headerNavHeight: 0,

				// 内容
				code: "",
				userInfo: "",
				hintShow: false,

				privacy: getPrivacy() ? getPrivacy() : false,
			}
		},
		onLoad() {},
		onShow() {
			this.anthCode();
		},
		mounted() {
			this.$refs.headerNavComponent.setHeaderNav();
			this.headerNavHeight = this.$refs.headerNavComponent.headerNavHeight;
		},
		methods: {
			/**
			 * @description 返回上一页
			 */
			goBack() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						uni.reLaunch({
							url: this.$store.getters.pagePath
						});
					}
				});
			},
			/**
			 * @description 用户隐私保护提示
			 */
			closePrivacyPopup(flag) {
				setPrivacy(flag);
				this.privacy = flag;
				this.$refs.myPrivacyPopup.closePrivacyShow();
			},
			/**
			 * @description 授权code
			 */
			anthCode() {
				uni.login({
					provider: "weixin", //使用微信登录
					success: (res) => {
						this.code = res.code;
					},
					fail: (e) => {
						uni.showToast({
							title: "授权失败!",
							icon: "none",
							mask: true,
							duration: 3000
						});
					}
				})
			},
			/**
			 * @description 授权登录
			 */
			complete() {
				if (this.privacy) {
					uni.showLoading({
						title: "登录中...",
						mask: true
					});

					uni.getUserProfile({
						desc: "完善用户资料",
						success: (res) => {
							this.setAuth(this.code, res.iv, res.encryptedData);
						},
						fail: (e) => {
							uni.hideLoading();
							uni.showToast({
								title: "登录失败",
								icon: "none",
								mask: true,
								duration: 3000
							});
						}
					})
				} else {
					this.$refs.myPrivacyPopup.openPrivacyShow();
				}
			},
			/**
			 * @description 授权登录，获取用户信息
			 */
			setAuth(code, iv, encryptedData) {
				let params = {
					code,
					iv,
					encryptedData
				};

				requestPost(wxLogin, {
					data: params
				}).then((res) => {
					// 缓存信息
					setToken(res.data.token)
					setUserInfo(res.data.userInfo)
					this.userInfo = JSON.parse(JSON.stringify(res.data.userInfo));

					if (this.userInfo.phone == '' || this.userInfo.phone == null) {
						this.hintShow = true;
					} else if (this.userInfo.nickname == "微信用户" || this.userInfo.nickname == "" || this.userInfo.nickname ==
						null || this.userInfo.avatar == "" || this.userInfo.avatar == null) {
						uni.reLaunch({
							url: "/pages/login/complete"
						});
					} else {
						// 回到上一级
						this.goBack();
					}
				}).catch((e) => {}).finally(() => {
					uni.hideLoading();
				});
			},
			/**
			 * @description 绑定手机
			 */
			getPhoneNumber(e) {
				let {
					code,
					iv,
					encryptedData
				} = e.detail;

				let params = {
					code
				};

				requestPost(bindMobile, {
					data: params
				}).then((res) => {
					if (this.userInfo.nickname == '微信用户' || this.userInfo.nickname == "" || this.userInfo.nickname == null) {
						uni.reLaunch({
							url: "/pages/login/complete"
						});
					} else {
						// 回到上一级
						this.goBack();
					}
				}).catch((e) => {
					uni.reLaunch({
						url: this.$store.getters.pagePath
					});
				}).finally(() => {});
			},
			/**
			 * @description 关闭提示弹窗
			 */
			closeShow() {
				this.hintShow = false;

				// 回到上一级
				this.goBack();
			},
			/**
			 * @description 下拉刷新钩子
			 */
			onPullDownRefresh() {
				uni.stopPullDownRefresh();
			},
			/**
			 * @description 上拉加载钩子
			 */
			onReachBottom() {
				console.log("上拉加载！！！");
			},
			/**
			 * @description 返回操作钩子
			 */
			onBackPress(e) {
				// backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
				if (e.from === "backbutton") {
					// 阻止返回true
					// return true; // 一级页面阻止返回，其它不阻止
				}
			},
			/**
			 * @description 分享（兼容小程序）
			 */
			onShareAppMessage() {
				return {
					title: "登录",
					path: "/pages/login/login"
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
	}

	.logo {
		width: 144rpx;
		height: 144rpx;
	}

	.login-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		height: 100rpx;
		font-size: $L-fs;
		color: $color-bai;
		background-color: $color-lv;
		border-radius: 50rpx;
	}

	.not-login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		height: 100rpx;
		margin-top: 30rpx;
		font-size: $L-fs;
		color: $color-lv;
		border: 1rpx solid $color-lv;
		border-radius: 50rpx;
	}

	.hint-box-bg {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100vh;
		background-color: $color-tm-hei;

		.hint-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 2;
			width: 80%;
			height: 300rpx;
			padding: 60rpx 20rpx 30rpx 20rpx;
			background-color: $color-bai;
			border-radius: 50rpx;

			text {
				height: 30rpx;
				line-height: 30rpx;
				font-size: $L-fs;
				color: $color-hei;
			}

			.bind-btn {
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				background-color: $color-lv;
				font-size: $L-fs;
				color: $color-bai;
			}

			.close-show {
				height: 30rpx;
				line-height: 30rpx;
				padding: 0 40rpx;
				font-size: $L-fs;
				color: $color-hui;
			}
		}
	}
</style>